<template>
  <div class="p-20 flex">
    <div class="flex-1">
      <div class="functions tile-card p-20">
        <h4 id="导出excel方法">导出excel方法</h4>
        <highlightjs :code="code"></highlightjs>
      </div>
      <div class="functions tile-card p-20 mt-20">
        <h4 id="监听元素宽高变化的钩子">监听元素宽高变化的钩子</h4>
        <highlightjs :code="code2"></highlightjs>
      </div>
      <div class="functions tile-card p-20 mt-20">
        <h4 id="省市区JSON">引用模板内置的省市区JSON</h4>
        <highlightjs :code="code3"></highlightjs>
      </div>
      <div class="nomore mt-20">持续更新中...</div>
    </div>
    <div class="tile-card anthor p-20">
      <div class="anchor-title"><Navigation />快捷导航</div>
      <el-anchor container=".view-container" :offset="80">
        <el-anchor-link href="#导出excel方法" title="导出excel方法" />
        <el-anchor-link href="#监听元素宽高变化的钩子" title="监听元素宽高变化的钩子" />
        <el-anchor-link href="#省市区JSON" title="引用模板内置的省市区JSON" />
      </el-anchor>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Navigation } from '@icon-park/vue-next';
import { ref } from 'vue';

const values = ref([]);

const code = `
  <script lang="ts" setup>
  import { excelData, exportToExcel } from "@/utils/xlsx";

  const arr = [
    { name: "张三", age: 18 },
    { name: "李四", age: 20 }
  ];
  const filter = ["name", "age"]; //筛选你需要的导出的数据的key
  const data = excelData(arr, f); //通过excelData方法获取表格数据
  const header = ["姓名","年龄"] //表格表头 header的顺序要与filter的顺序对应

  exportToExcel({ data, header, fileName: "文件名称" }); //导出表格数据
  <\/script>
`;
const code2 = `
  <template>
   <div ref="containerRef"></div>  
  </template>

  <script lang="ts" setup>
  import { ref } from 'vue';
  import { useResize } from '@/hooks';

  const containerRef = ref(); //监听变化的元素

  const resizeCallback = () => {
    /* do something */
  };

  useResize(containerRef, resizeCallback, {
    debounce: 200  //设置防抖
    //你可以自己在钩子函数的源码中添加其它你需要的参数配置
  });
  <\/script>
`;

const code3 = `
  <template>
    <el-cascader
      :options="regions_json"
      :prop="{ value: 'code', children: 'list' }"
      v-model="values"
      placeholder="Please select" />
  </template>

  <script lang="ts" setup>
  import { ref } from 'vue';
  import { regions_json } from '@/utils/sdk';

  type RegionsJson = {  //JSON数据类型
    label: string; 
    code: string;
    list?: RegionsJson[];
  }[];

  const values = ref();
  
  <\/script>
`;
</script>
<style lang="scss" scoped>
.anthor {
  margin-left: 20px;
  min-width: 200px;
  position: sticky;
  top: 20px;
  height: fit-content;

  .anchor-title {
    font-size: 14px;
    margin-bottom: 8px;
    font-weight: 900;
  }
}

.functions {
  h4 {
    margin-bottom: 10px;
  }
}
.nomore {
  font-size: 12px;
  color: #999;
  text-align: center;
}
</style>
